<template>
  <main class="relative h-screen overflow-hidden bg-gray-100 rounded-2xl" data-theme="light">
    <div class="flex items-start justify-between">
      <div class="relative hidden h-screen my-4 ml-4 shadow-lg lg:block w-80">
        <div class="h-full bg-white rounded-2xl">
          <div class="flex items-center justify-center pt-6">
            <svg width="35" height="30" viewBox="0 0 256 366" version="1.1" preserveAspectRatio="xMidYMid">
              <defs>
                <linearGradient x1="12.5189534%" y1="85.2128611%" x2="88.2282959%" y2="10.0225497%"
                                id="linearGradient-1">
                  <stop stop-color="#FF0057" stop-opacity="0.16" offset="0%">
                  </stop>
                  <stop stop-color="#FF0057" offset="86.1354%">
                  </stop>
                </linearGradient>
              </defs>
              <g>
                <path
                    d="M0,60.8538006 C0,27.245261 27.245304,0 60.8542121,0 L117.027019,0 L255.996549,0 L255.996549,86.5999776 C255.996549,103.404155 242.374096,117.027222 225.569919,117.027222 L145.80812,117.027222 C130.003299,117.277829 117.242615,130.060011 117.027019,145.872817 L117.027019,335.28252 C117.027019,352.087312 103.404567,365.709764 86.5997749,365.709764 L0,365.709764 L0,117.027222 L0,60.8538006 Z"
                    fill="#001B38">
                </path>
                <circle fill="url(#linearGradient-1)"
                        transform="translate(147.013244, 147.014675) rotate(90.000000) translate(-147.013244, -147.014675) "
                        cx="147.013244" cy="147.014675" r="78.9933938">
                </circle>
                <circle fill="url(#linearGradient-1)" opacity="0.5"
                        transform="translate(147.013244, 147.014675) rotate(90.000000) translate(-147.013244, -147.014675) "
                        cx="147.013244" cy="147.014675" r="78.9933938">
                </circle>
              </g>
            </svg>
          </div>
          <nav class="mt-6">
            <div>
              <a :class="item.current ?
              'flex items-center justify-start w-full p-4 my-2 font-thin text-blue-500 uppercase transition-colors duration-200 border-r-4 border-blue-500 bg-gradient-to-r from-white to-blue-100'
              : 'flex items-center justify-start w-full p-4 my-2 font-thin text-gray-500 uppercase transition-colors duration-200 hover:text-blue-500'"
                 :href='item.href' v-for="item in navigation">
                <span class="text-left">
                                <svg width="20" height="20" fill="currentColor" class="m-auto" viewBox="0 0 1024 1024"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path :d="item.svgPath"></path>
                                </svg>
                            </span>
                <span class="mx-4 text-sm font-normal">
                                {{item.name}}
                            </span>
              </a>
            </div>
          </nav>
        </div>
      </div>
      <div class="flex flex-col w-full pl-0 md:p-4 md:space-y-4">
        <header class="z-40 items-center w-full h-16 bg-white shadow-lg rounded-2xl">
          <div class="relative z-20 flex flex-col justify-center h-full px-3 mx-auto flex-center">
            <div class="relative flex items-center w-full pl-1 lg:max-w-68 sm:pr-2 sm:ml-0">
              <div class="container relative left-0 z-50 flex w-3/4 h-auto h-full">
                <div class="relative flex items-center w-full h-full lg:w-64 group">
                  <div
                      class="absolute z-50 flex items-center justify-center block w-auto h-10 p-3 pr-2 text-sm text-gray-500 uppercase cursor-pointer sm:hidden">
                    <svg fill="none" class="relative w-5 h-5" stroke-linecap="round" stroke-linejoin="round"
                         stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
                      <path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z">
                      </path>
                    </svg>
                  </div>

<!--                  <div>-->
<!--                    111-->
<!--                  </div>-->
<!--                  <div>-->
<!--                    222-->
<!--                  </div>-->

                </div>
              </div>
              <div class="relative flex items-center justify-end w-1/4 p-1 ml-5 mr-4 sm:mr-0 sm:right-auto">
                <a href="#" class="relative block">
                  <img alt="profil" :src="logo" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                </a>
              </div>
            </div>
          </div>
        </header>


        <div class="h-screen pt-2 pb-24 pl-2 pr-2 overflow-auto md:pt-0 md:pr-0 md:pl-0">
          <slot name="main"></slot>
        </div>

      </div>
    </div>
  </main>

</template>

<script setup>
import logo from '/assets/images/logo.jpeg'

const route = useRoute();

const activeIndex = computed(() => {
  return route.meta.index
})

const navigation = [
  {name: '数据大屏', href: '/manage', current: activeIndex.value === 'index', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
  {name: '用户管理', href: '/manage/user', current: activeIndex.value === 'user', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
    {name: '顾客信息', href: '/manage/customerInfo', current: activeIndex.value === 'manage-customerInfo', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
  {name: '酒店房型', href: '/manage/roominfo', current: activeIndex.value === 'manage-roominfo', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
  {name: '入住情况', href: '/manage/serviceInfo', current: activeIndex.value === 'manage-serviceInfo', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
  { name: 'AI 聊天助手', href: '/manage/ai-chat', current: activeIndex.value === 'manage-ai-chat', svgPath: '...' }, // 新增
]

</script>